<template>
  <div>

    <div class="weui-mask weui-animate-fade-in"></div>
    <div class="weui-picker weui-animate-slide-up">
      <div class="weui-picker__hd">
        <span @click="cancel" class="weui-picker__action" >取消</span>
        <span @click="done"  class="weui-picker__action" >确定</span>
      </div>
      <div  ref="picker__bd" class="weui-picker__bd">
       
      </div>
    </div>

  </div>
</template>
<script>
// import PickerItem from "../PickerItem/Index.vue";
import Scroller from "../Scroller";
export default {
  components: {
    // PickerItem
  },
  props: {
    show:false,
    data: Array
  },
  data() {
    return {
      values:[],
      pickers: []
    };
  },
  watch: {
    
  },
  methods: {
    cancel(){
      this.$emit('cancel');
    },
    done(){
      let arr = [];
      this.pickers.forEach((v,i)=>{
        arr.push({
          value:v.getValue(),
          name:v.getName(),
        })
      })
    //  console.log('88888',this.pickers[0].getValue())
      this.$emit('done', arr);
    },
    //第一列
    setColumn0() {
      this.pickers[0].destroy();
    },
    setColumn1() {
      console.log("setColumn1", this.data[1]);
      this.pickers[2].destroy();
      this.pickers[1].destroy();
      this.pickers[1] = this.renderScroller(this.data[1], val => {
        this.$emit("change", 1, val);
        this.setColumn2();
        this.values[1] = val;
      });
      this.$emit("change", 1, this.data[1][0].value);
      this.setColumn2();
    },
    setColumn2() {
      // debugger;
      this.pickers[2].destroy();
      this.pickers[2] = this.renderScroller(this.data[2], () => {});
    },
    setColumn3() {
      this.pickers[3].destroy();
    },
    renderScroller(d, fn) {
      return new Scroller(this.$refs.picker__bd, {
        onSelect: fn,
       
        data: d
      });
    }
  },
  mounted() {
    // console.log('wrssssssssssss', this.data)
    this.$nextTick(() => {
     
      this.data.forEach((d, i) => {
        // this.$watch(this.data[i], () => {
        //   console.log('watch')
        // })
        this.pickers[i] = this.renderScroller(d, val => {
        //  console.log(this.data);
        ///  console.log(this.data.length);
        //  console.log("setColumn", i + 1);
          this.$emit("change", i, val);
          this["setColumn" + (i + 1)]();

          // for (let k = i + 1; k < this.data.length; k++) {
          //   this["setColumn" + k]();
          // }
          // this.$emit("change", i, val);
          //  this.pickers[i + 1].destroy();
          // this.pickers[i + 1] = this.renderScroller(this.data[i+1], val => {});
          // console.log("change onSelect", i, val);
        });
        // this.$watch(this.pickers[i], () => {
        //   console.log('ssssssssssss')
        // })
        // this.pickers[i] = new Scroller(this.$refs.picker__bd, {
        //   onSelect: val => {
        //     // console.log(val, i);
        //     this.$emit("change", i, val);
        //     console.log("change onSelect");
        //   },
        //   data: d
        // });
        // console.log('ssssssssssssssssssss')
        // this.$watch(this.data[i], () => {
        //   console.log("ssss", i);
        // });
      });
      // new Scroller(this.$refs.div1, {
      //    onSelect:function(val){
      //    console.log(val)
      //  },
      //   data: [{name:"namess1",value:'ss1'},{name:"namess2",value:'ss2'}]
      // });
    });
  }
};
</script>

 